import React, { PureComponent } from 'react';
import ComponentProps from "./componentProps"
import { connect } from 'dva';
import Tab from "../tab"
import "./form.less"
import "../../Common.less"
import {debounce,cloneDeep} from "lodash"
class ComponentEdit extends PureComponent {
    constructor(props) {
        super(props);
        this.state = {
            menus:[],
            cindex:0,
            data:null,
            origalData:null,
            attrDictList:[]
        }
        this.tabClick=this.tabClick.bind(this)
        this.reset=this.reset.bind(this)
        this.onChange=this.onChange.bind(this)
        this.onConfirm=this.onConfirm.bind(this)
    }
    async reset(){
        let origalData=JSON.parse(sessionStorage.getItem("origalData")); 
        await this.setState({
            data:origalData
        })
        const {componentPropsContext}=this.state;
        if(componentPropsContext){
            componentPropsContext.resetForm()
        }
    }
    onConfirm(params){
        let {extra,updateBatchDefinitionInstanceProperties,updateBatchTopDefinitionInstanceProperties}=this.props;
        let {componentPropsContext,data}=this.state
        return new Promise((resolve,reject)=>{
            if(!extra.selectedRowKeys){
                if(extra.type!='top'){
                    componentPropsContext.onConfirm().then(res=>{
                        updateBatchDefinitionInstanceProperties({definitionInstanceIds:[data.id],definitionInstanceVO:data,spanIds:[extra.sid||extra.spanId]},res=>{
                            resolve()
                        },err=>{
                            reject()
                        })
                    }).catch(err=>{
                        reject()
                    })
                }else{
                    componentPropsContext.onConfirm().then(res=>{
                        updateBatchTopDefinitionInstanceProperties({definitionInstanceIds:[data.id],definitionInstanceVO:data,selectListIds:[extra.selectionId]},res=>{
                            resolve()
                        },err=>{
                            reject()
                        })
                    }).catch(err=>{
                        reject()
                    })
                }
            }else{
                if(extra.type!='top'){
                    componentPropsContext.onConfirm().then(res=>{

                        updateBatchDefinitionInstanceProperties({definitionInstanceIds:extra.selectedRowKeys,definitionInstanceVO:data,spanIds:extra.unitids},res=>{
                            resolve()
                        },err=>{
                            reject()
                        })
                    }).catch(err=>{
                        reject()
                    })
                }else{
                    componentPropsContext.onConfirm().then(res=>{

                        updateBatchTopDefinitionInstanceProperties({definitionInstanceIds:[extra.selectedRowKeys[0]],definitionInstanceVO:data,selectListIds:extra.sids},res=>{
                            resolve()
                        },err=>{
                            reject()
                        })
                    }).catch(err=>{
                        reject()
                    })
                }
                
                
            }
      
        })
    }
    async componentDidMount(){
        let {extra,onLoaded,definitionTreeAttrList,getDefinitionInstanceDetail}=this.props;
        if(onLoaded){
            onLoaded(this)
        }
        let data=await definitionTreeAttrList()
        this.setState({
            attrDictList:data
        })
        
        let res=await getDefinitionInstanceDetail({id:extra.id})
        let menus=[];
        if(res&&res.definitionInstanceComponents&&res.definitionInstanceComponents.length){
            const len=res.definitionInstanceComponents.length
            for (let i = 0; i < len; i++) {
                let item = res.definitionInstanceComponents[i];
                menus.push({
                    name:item.instanceComponentName,
                    definitionInstanceSideId:item.definitionInstanceSideId,
                    definitionTreeId:item.definitionTreeId,
                    id:item.id
                })
            }
        }
        sessionStorage.setItem("origalData",JSON.stringify(res))
        this.setState({
            origalData:cloneDeep(res),
            data:res,
            menus
        })
    }
    tabClick(item,index){
        this.setState({
            cindex:index
        })
    }
    onChange(target,value){
        debounce(() => {
            let {data,cindex}=this.state;
            let propss=data.definitionInstanceComponents[cindex].definitionInstanceComponentProperties[0].definitionInstanceComponentProperty
            let obj=propss.find(item=>item.key==target.key)
            obj.value=value
            this.setState({
                data
            })
          }, 100)(); 
    }
    render() {
        let {data,menus,cindex,attrDictList}=this.state;

        return (
            <div className="componentEdit absMiddle">
                <Tab onClick={this.tabClick} index={cindex} menus={menus}></Tab>
                <div>
                    <ComponentProps onChange={this.onChange} onLoaded={context=>{
                        this.setState({
                            componentPropsContext:context
                        })
                    
                    }} attrDictList={attrDictList} data={data&&data.definitionInstanceComponents&&data.definitionInstanceComponents.length?data.definitionInstanceComponents[cindex].definitionInstanceComponentProperties[0].definitionInstanceComponentProperty:[]}></ComponentProps>
                </div>
            </div>
        )
    }
}
export default connect(
    ({ }) => ({

    }),
    dispatch => ({
        getDefinitionInstanceDetail: (values) => dispatch({
            type: 'structure/getDefinitionInstanceDetail',
            payload: values
        }),
        definitionTreeAttrList: (values) => dispatch({
            type: 'structure/definitionTreeAttrList',
            payload: values
        }),
        updateBatchDefinitionInstanceProperties: (values,onSuccess,onError) => dispatch({
            type: 'structure/updateBatchDefinitionInstanceProperties',
            payload: {
                values,
                onSuccess,
                onError
            }
        }),
        updateBatchTopDefinitionInstanceProperties: (values,onSuccess,onError) => dispatch({
            type: 'structure/updateBatchTopDefinitionInstanceProperties',
            payload: {
                values,
                onSuccess,
                onError
            }
        }),
        
    })
)(ComponentEdit);